import React, { Component } from 'react'
import './car.less'
import CountDown from '../../components/countDown/countDown'
import Lazy from '../../components/lazy_loading'
import UsePopup from '../../components/usePopup/usePopup'
import HocPopup from '../../components/usePopup/hocPopup'

export default class car extends Component {
  state = {
    num: 10,
    imgurl: '	https://gd2.alicdn.com/imgextra/i1/3299972211/O1CN01nSTzS61SCgT4udX0G_!!3299972211.jpg_400x400.jpg',
    obj: {
      a_b: '阿萨德',
      a_c: 'asd',
      a: 'asdf',
    },
    nums: [1, 1, 1, 2, 2, 3],
  }
  componentDidMount() {
    this.ff(this.state.nums)
  }
  ff = (data) => {
   data.map(item => {
      let arr = []
      if (item === data) {
        console.log(item);

        arr.push(item)
      }
      return arr
    })
  }
  // // 下划线格式转为小驼峰格式
  // camel = (data) => {
  //   if (typeof data != 'object' || !data) return data
  //   if (Array.isArray(data)) {
  //     return data.map(item => camel(item))
  //   }
  //   const newData = {}
  //   for (let key in data) {
  //     let newKey = key.replace(/_([a-z])/g, (p, m) => m.toUpperCase())
  //     newData[newKey] = camel(data[key])
  //   }
  //   return newData
  // }

  // // 小驼峰格式转为下划线格式
  // underline = (data) => {
  //   if (typeof data != 'object' || !data) return data
  //   if (Array.isArray(data)) {
  //     return data.map(item => underline(item))
  //   }
  //   const newData = {}
  //   for (let key in data) {
  //     let newKey = key.replace(/([A-Z])/g, (p, m) => `_${m.toLowerCase()}`)
  //     newData[newKey] = underline(data[key])
  //   }
  //   return newData
  // }
  render() {
    let { num, imgurl } = this.state
    return (
      <div className='car'>
        <div className='top'>
          <h2>倒计时</h2>
          <CountDown num={num}></CountDown>
        </div>

        <div className="popup">
          <h2>弹出层</h2>
          <button onClick={() => { }}>弹出</button>
          <UsePopup>
            <p>弹出层1111</p>
          </UsePopup>

        </div>

        <div className="usehoc">
          <HocPopup></HocPopup>
        </div>


        <div className="lazy">
          <Lazy imgurl={imgurl}></Lazy>
        </div>
      </div>
    )
  }
}
